<!DOCTYPE html>
<html lang="en">
<head>
    <title>Remote Desktop</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
</head>
<body>
<div class="container-fluid">
    <div class="col-md-2 well" style="height: 500px;">

    </div>
    <div id="panel" class="col-md-10 well" style="height: 500px;">

    </div>
</div>
<script type="application/javascript" src="/static/js/jquery-2.1.3.min.js"></script>
<script type="application/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="application/javascript">
    function onOpen(evt) {
        console.log("Connected to WebSocket server.");
    }
    function onClose(evt) {
        console.log("Disconnected");
    }
    function onMessage(evt) {
        console.log('Retrieved data from server: ' + evt.data);
    }
    function onError(evt) {
        console.log('Error occured: ' + evt.data);
    }
    $(document).ready(function () {
        var websocket = new WebSocket("ws://127.0.0.1:12345/mouse/");
        websocket.onopen = function (evt) {
            onOpen(evt)
        };
        websocket.onclose = function (evt) {
            onClose(evt)
        };
        websocket.onmessage = function (evt) {
            onMessage(evt)
        };
        websocket.onerror = function (evt) {
            onError(evt)
        };
        var panel = $("#panel");

        var clickTimer = null;

        panel.bind("mousewheel", function (e) {
            // todo
            return false;
        });

        panel.bind("contextmenu", function (e) {
            websocket.send(JSON.stringify({
                        "ActionType": 1,
                        "X": e.clientX - panel.offset().left.toFixed(),
                        "Y": e.clientY - panel.offset().top.toFixed(),
                    })
            );
            return false;
        });
        panel.click(function (e) {
            clearTimeout(clickTimer);
            clickTimer = setTimeout(function () {
                websocket.send(JSON.stringify({
                            "ActionType": 0,
                            "X": e.clientX - panel.offset().left.toFixed(),
                            "Y": e.clientY - panel.offset().top.toFixed(),
                        })
                );
            }, 300);
        });
        panel.dblclick(function (e) {
            clearTimeout(clickTimer);
            websocket.send(
                    JSON.stringify({
                        "ActionType": 3,
                        "X": e.clientX - panel.offset().left.toFixed(),
                        "Y": e.clientY - panel.offset().top.toFixed(),
                    })
            );
        });
    });
</script>
</body>
</html>